<template>
  <view class="pageLayout">
    <view class="head">
      <u-notice-bar
        text="隐耀商学院用真诚的态度陪伴每一名员工持续成长"
      ></u-notice-bar>
    </view>
    <view class="videoList">
      <!-- 视频列表 -->
      <view
        v-for="(item, index) in videoList"
        :key="index"
        class="videoItem"
        @click="gotoVideoInfo(item)"
      >
        <!-- 视频内容占位 -->
        <view class="videoImg">
          <image :src="imgUrl + '/' + item.cover" mode="scaleToFill" />
        </view>
        <view class="text_ell1 title">{{ item.title }}</view>
        <view class="topicName"
          >{{ item.topicName }}-{{ item.categoryName }}</view
        >
      </view>

      <!-- 加载状态提示 -->
      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="videoList.length==0 && !loading" class="no-more">没有更多视频了</view>
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>
  
  <script>
import { queryVideoPageList } from "@/api/welcome/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
  },
  data() {
    return {
      // 分页参数
      listForm: {
        pageIndex: 1,
        pageSize: 10,
      },
      totalPages: 0, //总页数
      // 数据状态
      videoList: [],
      isMore: false,
      loading: false,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    /**
     * 视频详情页面
     * @param item
     */
    gotoVideoInfo(item) {
      uni.navigateTo({
        url: `/pagesA/businessVideo/index?id=${item.videoID}`,
      });
    },
    /**
     * 获取视频列表
     * @param {boolean} isLoadMore 是否为加载更多
     */
    async getVideoList(isLoadMore = false) {
      try {
        this.loading = true;
        this.isMore = true;
        // 请求参数合并
        const data = {
          ...this.listForm,
        };

        const res = await queryVideoPageList(data);
        this.videoList = res.data.items;

        this.totalPages = res.data.totalPages;
        this.isMore = false;
        this.loading = false;
      } catch (e) {
        let message;
        if (e.data && e.data.detail) {
          message = e.data.detail;
        } else {
          message = e.errorMsg;
        }
        this.$refs.toastRef.showToast({
          msg: message,
          duration: 1000,
          position: "center",
        });
      } finally {
        this.isMore = false;
        this.loading = false;
      }
    },
    /**
     * 重置分页
     */
    resetSearch() {
      this.listForm.pageIndex = 1;
      this.videoList = [];
      this.getVideoList();
    },
  },

  onReachBottom() {
    if (this.isMore) {
      return;
    }
    if (this.listForm.pageIndex < this.totalPages) {
      this.listForm.pageIndex++;
      this.getVideoList(true); // 触发加载更多
    }
  },

  mounted() {
    this.resetSearch();
  },
};
</script>
  
  <style lang="scss" scoped>
.pageLayout {
  padding: 24rpx 40rpx;
}
.videoList {
  display: flex;
  margin-top: 20rpx;
  justify-content: space-between;
  flex-wrap: wrap;
  .videoItem {
    margin-right: 20rpx;
    width: 45%;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    // align-items: center;
    border-radius: 18rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .videoImg {
      width: 100%;
      height: 180rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .title {
    padding: 18rpx;
    font-size: 24rpx;
    color: #333;
    box-sizing: border-box;
    padding-bottom: 0;
  }
  .topicName {
    padding: 18rpx;
    font-size: 20rpx;
    color: #aaaaaa;
  }
}

.loading-text,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>